@font-face {
      font-family: "fuente";
      src: url(fonts/pefont.otf) format("truetype");
    }

    #botonenviar {
      background-color: #0070ca;
      font-size: 25px;
    }

    .carousel-item.active,
    .carousel-item-next,
    .carousel-item-prev {
      display: block;
    }



    #img {
      border: 2px solid #ccc;
      float: left;
      margin: 15px;
      -webkit-transition: margin 0.5s ease-out;
      -moz-transition: margin 0.5s ease-out;
      -ms-transition: margin 0.5s ease-out;
      transition: margin 0.5s ease-out;
    }

    #ex1 img:hover {
      margin-top: 2px;
    }

    #nav {
      background: rgba(212, 36, 74, 1);
      background: -moz-linear-gradient(top, rgba(212, 36, 74, 1) 0%, rgba(212, 36, 74, 1) 47%, rgba(147, 23, 48, 1) 100%);
      background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(212, 36, 74, 1)), color-stop(47%, rgba(212, 36, 74, 1)), color-stop(100%, rgba(147, 23, 48, 1)));
      background: -webkit-linear-gradient(top, rgba(212, 36, 74, 1) 0%, rgba(212, 36, 74, 1) 47%, rgba(147, 23, 48, 1) 100%);
      background: -o-linear-gradient(top, rgba(212, 36, 74, 1) 0%, rgba(212, 36, 74, 1) 47%, rgba(147, 23, 48, 1) 100%);
      background: -ms-linear-gradient(top, rgba(212, 36, 74, 1) 0%, rgba(212, 36, 74, 1) 47%, rgba(147, 23, 48, 1) 100%);
      background: linear-gradient(to bottom, rgba(212, 36, 74, 1) 0%, rgba(212, 36, 74, 1) 47%, rgba(147, 23, 48, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4244a', endColorstr='#931730', GradientType=0);
    }

    #bloque {
      background-color: #fafafa;
    }

    @font-face {
      font-family: "fuente";
      src: url(fonts/pefont.otf) format("truetype");
    }

    #botonenviar {
      background-color: #0070ca;
      font-size: 25px;
    }

    .carousel-item.active,
    .carousel-item-next,
    .carousel-item-prev {
      display: block;
    }

    #img {
      border: 2px solid #ccc;
      float: left;
      margin: 15px;
      -webkit-transition: margin 0.5s ease-out;
      -moz-transition: margin 0.5s ease-out;
      -ms-transition: margin 0.5s ease-out;
      transition: margin 0.5s ease-out;
    }

    #ex1 img:hover {
      margin-top: 2px;
    }

    #nav {
      background: rgba(212, 36, 74, 1);
      background: -moz-linear-gradient(top, rgba(212, 36, 74, 1) 0%, rgba(212, 36, 74, 1) 47%, rgba(147, 23, 48, 1) 100%);
      background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(212, 36, 74, 1)), color-stop(47%, rgba(212, 36, 74, 1)), color-stop(100%, rgba(147, 23, 48, 1)));
      background: -webkit-linear-gradient(top, rgba(212, 36, 74, 1) 0%, rgba(212, 36, 74, 1) 47%, rgba(147, 23, 48, 1) 100%);
      background: -o-linear-gradient(top, rgba(212, 36, 74, 1) 0%, rgba(212, 36, 74, 1) 47%, rgba(147, 23, 48, 1) 100%);
      background: -ms-linear-gradient(top, rgba(212, 36, 74, 1) 0%, rgba(212, 36, 74, 1) 47%, rgba(147, 23, 48, 1) 100%);
      background: linear-gradient(to bottom, rgba(212, 36, 74, 1) 0%, rgba(212, 36, 74, 1) 47%, rgba(147, 23, 48, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4244a', endColorstr='#931730', GradientType=0);
    }

    #bloque {
      background-color: #b31d3a;
    }

    @media screen and (max-width: 600px) {
      #gr {
        display: none;
      }
    }

    @media screen and (min-width: 600px) {
      #ch {
        display: none;
      }
    }

  @media screen and (max-width: 900px) {
      #xl {
        display: none;
      }
    }